import React, { useState, useEffect, useRef, useImperativeHandle } from 'react';
import { Card, Row, Col, Statistic, Table, Tag, Button, Space, Badge, Progress, Modal, Descriptions, Form, InputNumber, Select, Switch, Slider, Radio, message } from 'antd';
import { 
  CheckCircleOutlined, 
  CloseCircleOutlined, 
  ExclamationCircleOutlined,
  SyncOutlined,
  EyeOutlined,
  SettingOutlined,
  AppstoreOutlined
} from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';

interface DeviceStatus {
  id: string;
  name: string;
  category: string;
  location: string;
  status: 'online' | 'offline' | 'warning' | 'error';
  lastUpdate: string;
  uptime: number;
  signal: number;
}

interface SystemStats {
  totalDevices: number;
  onlineDevices: number;
  offlineDevices: number;
  warningDevices: number;
  errorDevices: number;
  onlineRate: number;
}

// 统一的控制面板组件，内部维护独立的 Form 实例，避免 useForm 未绑定警告
const ControlPanel = React.forwardRef<{
  submit: () => void;
}, {
  category: string;
  initialValues?: any;
  onSubmit: (values: any) => void;
}>(({ category, initialValues, onSubmit }, ref) => {
  const [form] = Form.useForm();

  useEffect(() => {
    if (initialValues) {
      form.setFieldsValue(initialValues);
    }
  }, [initialValues, form]);

  useImperativeHandle(ref, () => ({
    submit: async () => {
      const values = await form.validateFields().catch(() => null);
      if (!values) return;
      onSubmit(values);
    },
  }));

  switch (category) {
    case '暖通空调':
      return (
        <Form form={form} layout="vertical">
          <Form.Item name="hvacPower" label="电源">
            <Switch checkedChildren="开" unCheckedChildren="关" />
          </Form.Item>
          <Form.Item name="hvacMode" label="模式">
            <Select options={[
              { value: 'cool', label: '制冷' },
              { value: 'heat', label: '制热' },
              { value: 'auto', label: '自动' },
              { value: 'fan', label: '送风' },
            ]} />
          </Form.Item>
          <Form.Item name="hvacFanSpeed" label="风速">
            <Select options={[
              { value: 'auto', label: '自动' },
              { value: 'low', label: '低速' },
              { value: 'medium', label: '中速' },
              { value: 'high', label: '高速' },
            ]} />
          </Form.Item>
          <Form.Item name="hvacSwing" label="扫风">
            <Switch checkedChildren="开" unCheckedChildren="关" />
          </Form.Item>
          <Form.Item name="hvacTemp" label="设定温度">
            <InputNumber min={16} max={30} addonAfter="°C" style={{ width: 160 }} />
          </Form.Item>
          <Form.Item name="hvacPerfMode" label="性能模式">
            <Radio.Group>
              <Radio.Button value="eco">节能模式</Radio.Button>
              <Radio.Button value="comfort">舒适模式</Radio.Button>
              <Radio.Button value="turbo">强劲模式</Radio.Button>
            </Radio.Group>
          </Form.Item>
        </Form>
      );
    case '视频监控':
      return (
        <Form form={form} layout="vertical">
          <Form.Item name="cameraDirection" label="云台方向">
            <Radio.Group>
              <Radio.Button value="up">上</Radio.Button>
              <Radio.Button value="down">下</Radio.Button>
              <Radio.Button value="left">左</Radio.Button>
              <Radio.Button value="right">右</Radio.Button>
              <Radio.Button value="center">居中</Radio.Button>
            </Radio.Group>
          </Form.Item>
          <Form.Item name="cameraZoom" label="变焦">
            <Slider min={0} max={100} style={{ width: 300 }} />
          </Form.Item>
          <Form.Item name="cameraQuality" label="视频质量">
            <Select options={[
              { value: '720p', label: '720p' },
              { value: '1080p', label: '1080p' },
              { value: '4k', label: '4K' },
            ]} />
          </Form.Item>
        </Form>
      );
    case '环境监测':
      return (
        <Form form={form} layout="vertical">
          <Form.Item name="sampleInterval" label="采样间隔(秒)">
            <InputNumber min={5} max={600} style={{ width: 160 }} />
          </Form.Item>
          <Form.Item name="calibration" label="传感器校准">
            <Switch checkedChildren="启用" unCheckedChildren="关闭" />
          </Form.Item>
        </Form>
      );
    case '门禁系统':
      return (
        <Form form={form} layout="vertical">
          <Form.Item name="accessAction" label="门禁动作">
            <Select options={[
              { value: 'open', label: '打开门' },
              { value: 'unlock', label: '解锁' },
              { value: 'lock', label: '上锁' },
            ]} />
          </Form.Item>
          <Form.Item name="lockAuthMode" label="锁状态">
            <Radio.Group>
              <Radio.Button value="fingerprint">指纹锁状态</Radio.Button>
              <Radio.Button value="face">人脸识别状态</Radio.Button>
              <Radio.Button value="both">同时开启</Radio.Button>
            </Radio.Group>
          </Form.Item>
          <Form.Item name="duration" label="动作持续(秒)">
            <InputNumber min={1} max={60} style={{ width: 160 }} />
          </Form.Item>
        </Form>
      );
    case '消防系统':
      return (
        <Form form={form} layout="vertical">
          <Form.Item name="fireAction" label="消防动作">
            <Select options={[
              { value: 'reset', label: '复位' },
              { value: 'silence', label: '消音' },
              { value: 'test', label: '测试' },
            ]} />
          </Form.Item>
        </Form>
      );
    default:
      return <div>该设备类型暂未提供控制项。</div>;
  }
});

// 模拟实时直播组件（Canvas 渲染静态+动态元素）
const CameraLiveMock: React.FC<{ active: boolean; title?: string }> = ({ active, title }) => {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const rafRef = useRef<number | null>(null);

  useEffect(() => {
    if (!active) {
      if (rafRef.current) cancelAnimationFrame(rafRef.current);
      return;
    }
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    let t = 0;
    const render = () => {
      const w = canvas.width;
      const h = canvas.height;
      // 背景
      ctx.fillStyle = '#000';
      ctx.fillRect(0, 0, w, h);

      // 叠加低透明度的噪点模拟视频噪声
      const imageData = ctx.createImageData(w, h);
      for (let i = 0; i < imageData.data.length; i += 4) {
        const rnd = Math.random() * 255;
        imageData.data[i] = rnd;
        imageData.data[i + 1] = rnd;
        imageData.data[i + 2] = rnd;
        imageData.data[i + 3] = 35; // 透明度
      }
      ctx.putImageData(imageData, 0, 0);

      // 动态扫描条，模拟运动感
      const barY = ((Math.sin(t / 18) + 1) / 2) * (h - 24);
      ctx.fillStyle = 'rgba(0, 255, 0, 0.25)';
      ctx.fillRect(0, barY, w, 24);

      // 角标与时间戳
      ctx.fillStyle = '#fff';
      ctx.font = '14px monospace';
      ctx.fillText(new Date().toLocaleString(), w - 240, 24);
      ctx.fillStyle = 'red';
      ctx.beginPath();
      ctx.arc(18, 18, 6, 0, Math.PI * 2);
      ctx.fill();
      ctx.fillStyle = '#fff';
      ctx.fillText('REC', 32, 22);
      if (title) {
        ctx.fillText(title, 18, h - 12);
      }

      t++;
      rafRef.current = requestAnimationFrame(render);
    };
    render();

    return () => {
      if (rafRef.current) cancelAnimationFrame(rafRef.current);
    };
  }, [active, title]);

  return (
    <canvas
      ref={canvasRef}
      width={640}
      height={360}
      style={{ width: '100%', maxWidth: 640, borderRadius: 8, border: '1px solid #303030', background: '#000' }}
    />
  );
};

// 模拟温度传感器实时变化（数值 + 火柴盒折线图）
const TemperatureLiveMock: React.FC<{ active: boolean }> = ({ active }) => {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const timerRef = useRef<number | null>(null);
  const valuesRef = useRef<number[]>([]);
  const currentRef = useRef<number>(24);

  const draw = () => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;
    const w = canvas.width;
    const h = canvas.height;
    ctx.clearRect(0, 0, w, h);

    // 背景网格
    ctx.fillStyle = '#0b0d10';
    ctx.fillRect(0, 0, w, h);
    ctx.strokeStyle = '#1f242b';
    ctx.lineWidth = 1;
    for (let x = 0; x < w; x += 40) {
      ctx.beginPath();
      ctx.moveTo(x + 0.5, 0);
      ctx.lineTo(x + 0.5, h);
      ctx.stroke();
    }
    for (let y = 0; y < h; y += 20) {
      ctx.beginPath();
      ctx.moveTo(0, y + 0.5);
      ctx.lineTo(w, y + 0.5);
      ctx.stroke();
    }

    // 折线绘制（将温度值映射到画布高度）
    const minT = 16, maxT = 32;
    const mapY = (t: number) => {
      const clamped = Math.max(minT, Math.min(maxT, t));
      const ratio = (clamped - minT) / (maxT - minT);
      return h - ratio * (h - 8) - 4; // 上下留白
    };

    const vals = valuesRef.current;
    if (vals.length > 1) {
      ctx.beginPath();
      ctx.lineWidth = 2;
      ctx.strokeStyle = '#2ecc71';
      const stepX = w / (vals.length - 1);
      ctx.moveTo(0, mapY(vals[0]));
      for (let i = 1; i < vals.length; i++) {
        ctx.lineTo(i * stepX, mapY(vals[i]));
      }
      ctx.stroke();
    }

    // 阈值线
    const safeLow = 20, safeHigh = 26;
    ctx.strokeStyle = 'rgba(255,255,255,0.2)';
    ctx.setLineDash([6, 6]);
    ctx.beginPath();
    ctx.moveTo(0, mapY(safeLow));
    ctx.lineTo(w, mapY(safeLow));
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(0, mapY(safeHigh));
    ctx.lineTo(w, mapY(safeHigh));
    ctx.stroke();
    ctx.setLineDash([]);
  };

  useEffect(() => {
    if (!active) {
      if (timerRef.current) window.clearInterval(timerRef.current);
      return;
    }
    // 初始化历史数据
    valuesRef.current = Array.from({ length: 120 }, (_, i) => 24 + Math.sin(i / 12) * 1.2 + (Math.random() - 0.5) * 0.6);
    draw();
    timerRef.current = window.setInterval(() => {
      // 模拟当前温度变化：基线 24°C，加入缓慢漂移与噪声
      const drift = Math.sin(Date.now() / 5000) * 0.4;
      const noise = (Math.random() - 0.5) * 0.4;
      const next = Math.max(16, Math.min(32, currentRef.current + drift + noise));
      currentRef.current = next;
      const vals = valuesRef.current;
      vals.push(next);
      if (vals.length > 240) vals.shift();
      draw();
    }, 800);

    return () => {
      if (timerRef.current) window.clearInterval(timerRef.current);
    };
  }, [active]);

  const current = Math.round(currentRef.current * 10) / 10;
  const statusText = current < 20 ? '偏低' : current > 26 ? '偏高' : '稳定';
  const statusColor = current < 20 ? '#1890ff' : current > 26 ? '#faad14' : '#52c41a';

  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 8 }}>
        <span style={{ fontSize: 28, fontWeight: 600, color: '#fff' }}>{current.toFixed(1)}</span>
        <span style={{ color: '#aaa' }}>°C</span>
        <Tag color={statusColor} style={{ marginLeft: 8 }}>{statusText}</Tag>
      </div>
      <canvas
        ref={canvasRef}
        width={640}
        height={120}
        style={{ width: '100%', maxWidth: 640, borderRadius: 8, border: '1px solid #303030', background: '#0b0d10' }}
      />
    </div>
  );
};

const EquipmentMonitor: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [stats, setStats] = useState<SystemStats>({
    totalDevices: 156,
    onlineDevices: 128,
    offlineDevices: 18,
    warningDevices: 8,
    errorDevices: 2,
    onlineRate: 82.1,
  });
  
  const [deviceData, setDeviceData] = useState<DeviceStatus[]>([]);
  const [autoRefresh, setAutoRefresh] = useState(true);
  const [isDetailVisible, setIsDetailVisible] = useState(false);
  const [selectedDevice, setSelectedDevice] = useState<DeviceStatus | null>(null);
  const [isControlVisible, setIsControlVisible] = useState(false);
  const [controlDevice, setControlDevice] = useState<DeviceStatus | null>(null);
  const controlFormRef = useRef<{ submit: () => void } | null>(null);
  const [controlDefaults, setControlDefaults] = useState<any>({});
  const [messageApi, contextHolder] = message.useMessage();

  // 模拟设备数据
  const mockDeviceData: DeviceStatus[] = [
    {
      id: '1',
      name: '摄像头-大厅入口',
      category: '视频监控',
      location: 'A座大厅',
      status: 'online',
      lastUpdate: '2024-01-15 14:30:00',
      uptime: 99.8,
      signal: 85,
    },
    {
      id: '2',
      name: '温度传感器-机房',
      category: '环境监测',
      location: 'B座机房',
      status: 'warning',
      lastUpdate: '2024-01-15 14:25:00',
      uptime: 95.2,
      signal: 72,
    },
    {
      id: '3',
      name: '门禁控制器-财务室',
      category: '门禁系统',
      location: 'C座3楼',
      status: 'online',
      lastUpdate: '2024-01-15 13:45:00',
      uptime: 0,
      signal: 0,
    },
    {
      id: '4',
      name: '烟雾探测器-仓库',
      category: '消防系统',
      location: 'D座仓库',
      status: 'error',
      lastUpdate: '2024-01-15 14:10:00',
      uptime: 89.5,
      signal: 45,
    },
    {
      id: '5',
      name: '空调控制器-会议室',
      category: '暖通空调',
      location: 'A座5楼',
      status: 'online',
      lastUpdate: '2024-01-15 14:32:00',
      uptime: 98.7,
      signal: 92,
    },
  ];

  useEffect(() => {
    fetchDeviceData();
    
    // 自动刷新
    let interval: NodeJS.Timeout;
    if (autoRefresh) {
      interval = setInterval(() => {
        fetchDeviceData();
      }, 30000); // 30秒刷新一次
    }
    
    return () => {
      if (interval) clearInterval(interval);
    };
  }, [autoRefresh]);

  const fetchDeviceData = async () => {
    setLoading(true);
    // 模拟API调用
    setTimeout(() => {
      setDeviceData(mockDeviceData);
      setLoading(false);
    }, 500);
  };

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'online':
        return <CheckCircleOutlined style={{ color: '#52c41a' }} />;
      case 'offline':
        return <CloseCircleOutlined style={{ color: '#f5222d' }} />;
      case 'warning':
        return <ExclamationCircleOutlined style={{ color: '#faad14' }} />;
      case 'error':
        return <CloseCircleOutlined style={{ color: '#f5222d' }} />;
      default:
        return <SyncOutlined spin />;
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'online': return 'success';
      case 'offline': return 'error';
      case 'warning': return 'warning';
      case 'error': return 'error';
      default: return 'default';
    }
  };

  const getStatusText = (status: string) => {
    switch (status) {
      case 'online': return '在线';
      case 'offline': return '离线';
      case 'warning': return '警告';
      case 'error': return '故障';
      default: return '未知';
    }
  };

  const handleViewDevice = (device: DeviceStatus) => {
    setSelectedDevice(device);
    setIsDetailVisible(true);
  };

  const handleCloseDetail = () => {
    setIsDetailVisible(false);
    setSelectedDevice(null);
  };

  const handleControlDevice = (device: DeviceStatus) => {
    setControlDevice(device);
    // 预填不同设备类型的默认控制参数
    const defaults: any = {};
    switch (device.category) {
      case '暖通空调':
        defaults.hvacPower = true;
        defaults.hvacMode = 'auto';
        defaults.hvacTemp = 24;
        defaults.hvacFanSpeed = 'medium';
        defaults.hvacSwing = false;
        defaults.hvacPerfMode = 'comfort';
        break;
      case '视频监控':
        defaults.cameraDirection = 'center';
        defaults.cameraZoom = 50;
        defaults.cameraQuality = '1080p';
        break;
      case '环境监测':
        defaults.sampleInterval = 60; // 秒
        defaults.calibration = false;
        break;
      case '门禁系统':
        defaults.accessAction = 'unlock';
        defaults.duration = 5; // 秒
        defaults.lockAuthMode = 'both'; // 指纹+人脸同时开启为默认
        break;
      case '消防系统':
        defaults.fireAction = 'reset';
        break;
      default:
        break;
    }
    setControlDefaults(defaults);
    setIsControlVisible(true);
  };

  const handleCloseControl = () => {
    setIsControlVisible(false);
    setControlDevice(null);
  };

  const submitControlCommand = async () => {
    await controlFormRef.current?.submit();
  };

  // 控制面板内容由 ControlPanel 渲染

  const columns: ColumnsType<DeviceStatus> = [
    {
      title: '设备名称',
      dataIndex: 'name',
      key: 'name',
      width: 200,
    },
    {
      title: '设备类型',
      dataIndex: 'category',
      key: 'category',
      width: 120,
    },
    {
      title: '位置',
      dataIndex: 'location',
      key: 'location',
      width: 150,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (status) => (
        <Tag color={getStatusColor(status)} icon={getStatusIcon(status)}>
          {getStatusText(status)}
        </Tag>
      ),
    },
    {
      title: '在线率',
      dataIndex: 'uptime',
      key: 'uptime',
      width: 120,
      render: (uptime) => (
        <Progress 
          percent={uptime} 
          size="small" 
          strokeColor={uptime >= 95 ? '#52c41a' : uptime >= 80 ? '#faad14' : '#f5222d'}
        />
      ),
    },
    {
      title: '信号强度',
      dataIndex: 'signal',
      key: 'signal',
      width: 120,
      render: (signal) => (
        <Space>
          <Badge 
            status={signal >= 80 ? 'success' : signal >= 60 ? 'warning' : 'error'} 
            text={`${signal}%`} 
          />
        </Space>
      ),
    },
    {
      title: '最后更新',
      dataIndex: 'lastUpdate',
      key: 'lastUpdate',
      width: 160,
    },
    {
      title: '操作',
      key: 'action',
      width: 150,
      render: (_, record) => (
        <Space size="small">
          <Button
            type="link"
            size="small"
            icon={<EyeOutlined />}
            onClick={() => handleViewDevice(record)}
          >
            查看
          </Button>
          <Button
            type="link"
            size="small"
            icon={<SettingOutlined />}
            onClick={() => handleControlDevice(record)}
            disabled={record.status === 'offline'}
          >
            控制
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <div className="equipment-monitor">
      {contextHolder}
      <Row gutter={16} style={{ marginBottom: 16 }}>
        <Col span={6}>
          <Card>
            <Statistic
              title="设备总数"
              value={stats.totalDevices}
              prefix={<AppstoreOutlined />}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="在线设备"
              value={stats.onlineDevices}
              prefix={<CheckCircleOutlined style={{ color: '#52c41a' }} />}
              valueStyle={{ color: '#52c41a' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="离线设备"
              value={stats.offlineDevices}
              prefix={<CloseCircleOutlined style={{ color: '#f5222d' }} />}
              valueStyle={{ color: '#f5222d' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="在线率"
              value={stats.onlineRate}
              precision={1}
              suffix="%"
              prefix={<SyncOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
      </Row>

      <Card
        title="设备实时监控"
        extra={
          <Space>
            <Button
              type={autoRefresh ? 'primary' : 'default'}
              icon={<SyncOutlined spin={autoRefresh} />}
              onClick={() => setAutoRefresh(!autoRefresh)}
            >
              {autoRefresh ? '自动刷新中' : '开启自动刷新'}
            </Button>
            <Button
              type="primary"
              onClick={fetchDeviceData}
              loading={loading}
            >
              手动刷新
            </Button>
          </Space>
        }
      >
        <Table
          rowKey="id"
          loading={loading}
          columns={columns}
          dataSource={deviceData}
          pagination={{
            total: deviceData.length,
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `共 ${total} 条`,
          }}
          scroll={{ x: 1000 }}
        />
        <Modal
          title={selectedDevice ? `设备详情 - ${selectedDevice.name}` : '设备详情'}
          open={isDetailVisible}
          onCancel={handleCloseDetail}
          footer={[
            <Button key="close" onClick={handleCloseDetail}>关闭</Button>,
          ]}
          width={700}
          destroyOnHidden
        >
          {selectedDevice && (
            <>
              {selectedDevice.category === '视频监控' && (
                <>
                  <div style={{ marginBottom: 8 }}>
                    <Badge color="red" text="直播(模拟)" />
                  </div>
                  <CameraLiveMock active={isDetailVisible} title={selectedDevice.name} />
                  <div style={{ margin: '12px 0' }} />
                </>
              )}
              {selectedDevice.category === '环境监测' && (
                <>
                  <div style={{ marginBottom: 8 }}>
                    <Badge color="#2f54eb" text="温度(模拟)" />
                  </div>
                  <TemperatureLiveMock active={isDetailVisible} />
                  <div style={{ margin: '12px 0' }} />
                  {/* 温度阈值提示 */}
                  <div style={{ fontSize: 13, color: '#888', lineHeight: 1.8 }}>
                    <div>
                      <Tag color="#1890ff" style={{ marginRight: 8 }}>偏低</Tag>
                      <span>&lt; 20°C（蓝色）</span>
                    </div>
                    <div>
                      <Tag color="#52c41a" style={{ marginRight: 8 }}>稳定</Tag>
                      <span>20–26°C（绿色）</span>
                    </div>
                    <div>
                      <Tag color="#faad14" style={{ marginRight: 8 }}>偏高</Tag>
                      <span>&gt; 26°C（橙色）</span>
                    </div>
                  </div>
                </>
              )}
              <Descriptions column={2} bordered size="small">
                <Descriptions.Item label="设备名称">{selectedDevice.name}</Descriptions.Item>
                <Descriptions.Item label="设备类型">{selectedDevice.category}</Descriptions.Item>
                <Descriptions.Item label="位置">{selectedDevice.location}</Descriptions.Item>
                <Descriptions.Item label="状态">
                  <Tag color={getStatusColor(selectedDevice.status)} icon={getStatusIcon(selectedDevice.status)}>
                    {getStatusText(selectedDevice.status)}
                  </Tag>
                </Descriptions.Item>
                <Descriptions.Item label="在线率">{selectedDevice.uptime}%</Descriptions.Item>
                <Descriptions.Item label="信号强度">{selectedDevice.signal}%</Descriptions.Item>
                <Descriptions.Item label="最后更新" span={2}>{selectedDevice.lastUpdate}</Descriptions.Item>
              </Descriptions>
            </>
          )}
        </Modal>
        <Modal
          title={controlDevice ? `控制设备 - ${controlDevice.name}` : '控制设备'}
          open={isControlVisible}
          onCancel={handleCloseControl}
          footer={[
            <Button key="cancel" onClick={handleCloseControl}>取消</Button>,
            <Button key="ok" type="primary" onClick={submitControlCommand}>执行命令</Button>,
          ]}
          width={700}
          destroyOnHidden
        >
          {controlDevice && (
            <ControlPanel
              ref={controlFormRef}
              category={controlDevice.category}
              initialValues={controlDefaults}
              onSubmit={(values) => {
                if (!controlDevice) return;
                // 模拟发送控制指令
                messageApi.success(`控制指令已下发：${controlDevice.name}`);
                handleCloseControl();
              }}
            />
          )}
        </Modal>
      </Card>
    </div>
  );
};

export default EquipmentMonitor;